<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <!-- 事件冒泡 -->
        <!-- self阻止子元素冒泡 -->
        <!-- <ul @click.self="ulClick"></ul> -->
        <ul @click="ulClick">
            <!-- 原生js阻止冒泡，liClick($event)-传入$event -->

            <!-- vue事件修饰符解决方案 -->
            <li @click.stop="liClick">li----1111</li>

            <!-- <li @click="liClick">li----1111</li> -->
            <li>li----2222</li>
            <!-- 仅执行一次 -->
            <li @click.once="liClick">li----3333</li>
        </ul>

        <!-- 阻止默认行为 -->
        <a href="https://www.baidu.com" @click.prevent="handleChange">www.baidu.com</a>
    </div>


    <script>
        new Vue({
            el: "#box",
            data: {

            },
            methods: {
                ulClick() {
                    console.log("ul click");
                },
                //原生js阻止冒泡，liClick($event)-传入$event
                // liClick(ev) {
                //     ev.stopPropagation();
                //     console.log("li click");
                // }
                liClick() {
                    console.log("li click");
                },
                handleChange() {}
            }
        })
    </script>
</body>

</html>